<template>
  <view class="loading-state" v-if="visible">
    <view class="loading-content">
      <view class="loading-spinner">
        <view class="spinner-circle" :class="{ 'spinning': spinning }">
          <text class="spinner-icon">{{icon}}</text>
        </view>
      </view>
      <text class="loading-text elderly-text">{{message}}</text>
      <view class="loading-progress" v-if="showProgress">
        <view class="progress-bar" :style="{ width: progress + '%' }"></view>
        <text class="progress-text elderly-text">{{progress}}%</text>
      </view>
      <view class="loading-actions" v-if="showCancel">
        <button class="cancel-btn elderly-pressable" @tap="handleCancel">
          <text class="btn-text elderly-text">取消</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoadingState',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: '加载中...'
    },
    icon: {
      type: String,
      default: '⏳'
    },
    spinning: {
      type: Boolean,
      default: true
    },
    showProgress: {
      type: Boolean,
      default: false
    },
    progress: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 100
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'default', // default, success, warning, error
      validator: value => ['default', 'success', 'warning', 'error'].includes(value)
    }
  },
  methods: {
    handleCancel() {
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'light' }) } catch(e){}
      }
      
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.loading-state {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  padding: $elderly-spacing-lg;
}

.loading-content {
  background: $elderly-bg-primary;
  border-radius: $elderly-radius-lg;
  padding: $elderly-spacing-xl;
  box-shadow: $elderly-shadow-lg;
  border: 2rpx solid $elderly-border;
  text-align: center;
  min-width: 300rpx;
  max-width: 500rpx;
}

.loading-spinner {
  margin-bottom: $elderly-spacing-lg;
}

.spinner-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, $theme-orange, $theme-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: $elderly-shadow-base;
}

.spinner-circle.spinning {
  animation: spin 1s linear infinite;
}

.spinner-icon {
  font-size: 60rpx;
  color: #fff;
}

.loading-text {
  color: $elderly-text-primary;
  margin-bottom: $elderly-spacing-base;
  font-weight: 600;
}

.loading-progress {
  margin-bottom: $elderly-spacing-lg;
}

.progress-bar {
  height: 8rpx;
  background: linear-gradient(90deg, $theme-orange, $theme-blue);
  border-radius: 4rpx;
  margin-bottom: $elderly-spacing-xs;
  transition: width 0.3s ease;
}

.progress-text {
  color: $elderly-text-secondary;
  font-size: $elderly-font-sm;
}

.loading-actions {
  display: flex;
  justify-content: center;
}

.cancel-btn {
  min-height: $elderly-touch-lg;
  min-width: 120rpx;
  background: $elderly-bg-secondary;
  color: $elderly-text-primary;
  border: 2rpx solid $elderly-border;
  border-radius: $elderly-radius-base;
  font-size: $elderly-font-base;
  font-weight: 600;
  padding: 0 $elderly-spacing-base;
}

.cancel-btn:active {
  background: $elderly-bg-primary;
  transform: scale(0.98);
}

.btn-text {
  font-weight: 600;
}

/* 不同类型的样式 */
.loading-content[data-type="success"] .spinner-circle {
  background: linear-gradient(135deg, #2ed573, #7bed9f);
}

.loading-content[data-type="warning"] .spinner-circle {
  background: linear-gradient(135deg, #ffa502, #ff6348);
}

.loading-content[data-type="error"] .spinner-circle {
  background: linear-gradient(135deg, #ff4757, #ff6b6b);
}

/* 动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 脉冲动画 */
.spinner-circle.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>
